<template>
  <div class="app-content app-content-mobile" :style="{ paddingBottom: (tabar ? '1rem' : '0') ,paddingTop:(showNav?'0.92rem' : '0')}">
    <div class="app-title-group" v-if="showNav">
      <!-- :title="title?title:appTitle" -->
      <van-nav-bar :left-text="tabar ? '' : '返回'" :left-arrow="tabar ? false : true" @click-left="onClickLeft" @click-right="onClickRight">
        <template #right>
          <div class="follow-right">
            <span>关注我们</span>
            <img :src="followIcon" alt="">
          </div>
        </template>
      </van-nav-bar>
    </div>
    <div class="app-router-mobile">
      <router-view></router-view>
    </div>
    <van-tabbar safe-area-inset-bottom active-color="#ff4544" v-model="active" v-if="tabar" @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="bookmark-o">了解深耕</van-tabbar-item>
      <van-tabbar-item icon="orders-o">已购课程</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
    <!-- <van-number-keyboard safe-area-inset-bottom /> -->
    <van-popup v-model="codeShow" closeable round :style="{width:'70%'}">
      <div class="code-model-content">
        <div class="code-model-title">哲人石</div>
        <div class="code-model-img">
          <img :src="qrcode" alt="">
        </div>
        <div class="code-model-bottom">长安二维码</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Icon, Toast, NavBar, Tabbar, TabbarItem, Popup } from 'vant';
import followIcon from '@/assets/img/logoewm1.png';
import { mapState } from 'vuex';
export default {
  components: { [Icon.name]: Icon, [NavBar.name]: NavBar, [Tabbar.name]: Tabbar, [TabbarItem.name]: TabbarItem, [Popup.name]: Popup },
  data() {
    return {
      active: 0,
      title: '首页',
      tabar: false,
      follow: false,
      codeShow: false,
      showNav: false,
      followIcon: followIcon,
      qrcode:this.$API.QR_CODE_URL
    };
  },
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      this.tabar = to.meta.tabar;
      this.follow = to.meta.follow;
      this.showNav = to.meta.showNav;
      this.setScrollTop();
    }
  },
  computed: {
    ...mapState({
      appTitle: state => state.app.appTitle,
      loginBackRedirectUrL: state => state.app.loginBackRedirectUrL
    }),
  },
  created() {
    this.title = this.$route.meta.title;
    this.tabar = this.$route.meta.tabar;
    this.follow = this.$route.meta.follow;
    this.showNav = this.$route.meta.showNav;
    this.setActive(this.$route.path);
  },
  methods: {
    setActive(path){
      if(path == '/home' || path == '/' || path == ''){
        this.active=0;
      }else if(path == '/knowledge'){
        this.active=1;
      }else if(path == '/buyCurriculum'){
        this.active=2;
      }else if(path == '/user'){
        this.active=3;
      }
    },
    setScrollTop() {
      window.scrollTo(0, 0);
    },
    onClickLeft() {
      if (this.loginBackRedirectUrL) {  //返回上级h5
        this.$store.dispatch('app/setLoginBackRedirectUrl', null);
        this.$router.replace('/home');
      } else {  //返回app页面
        this.$router.back();
      }
    },
    onChange(e) { 
      if (e == 0) {
        this.$router.replace({ path: '/home' });
      } else if (e == 1) {
        // this.$router.replace({ path: '/knowledge' });
        window.open(this.$API.DEEP_PLOUGHING_PATH);
      }else if (e == 2) {
        this.$router.replace({ path: '/buyCurriculum' });
      }else if (e == 3) {
        this.$router.replace({ path: '/user' });
      }
    },
    Text2Html(str) {
      if (str == null) {
        return "";
      } else if (str.length == 0) {
        return "";
      }
      str = str.replace(/\r\n/g, '<br/>'); //IE9、FF、chrome
      str = str.replace(/\n/g, '<br/>'); //IE7-8
      str = str.replace(/\s/g, '&nbsp;'); //空格处理
      return str;
    },
    onClickRight() {
      this.codeShow = true;
    }
  }
};
</script>

<style lang="less">
.app-content-mobile {
  padding-top: 0.92rem;
  position: relative;
}

.app-content {
  .van-tabbar {
    border-top: 1px solid #eee;
  }

  .van-nav-bar__content {
    height: 0.92rem;
  }

  width: 100%;
  height: 100%;

  .app-router-mobile {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-title-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: #fafafa;
    align-items: center;
    height: 0.92rem;
    z-index: 999;
    border-bottom: 1px solid #eee;
    box-shadow: 0 15px 10px -15px rgba(0, 0, 0, 0.2);

    .van-nav-bar {
      // background: linear-gradient(to bottom right, #ff6857 0%, #f7a39a 100%);
      background: #eee;
      box-shadow: 1px 0 4px -3px #000;

      .van-nav-bar__title {
        color: #333;
        font-size: 0.28rem;
        line-height: 0.3rem;
        padding-right:0.5rem;
      }
    }

    .van-nav-bar__left {
      .van-icon,
      .van-nav-bar__text {
        color: #333;
        font-size: 0.28rem;
        line-height: 0.3rem;
      }
    }
    .follow-right {
      display: flex;
      align-items: center;
      span {
        font-size: 0.28rem;
        color: #333;
        padding-right: 0.1rem;
      }
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  }

  .van-tabbar {
    height: 1rem;
  }

  .van-tabbar-item__icon {
    font-size: 0.4rem;
  }

  .van-tabbar-item__text {
    font-size: 0.3rem;
  }
  .code-model-title {
    padding: 0.2rem;
    font-size: 0.32rem;
    background: #ff6857;
    color: #fff;
    line-height: 24px;
    text-align: center;
  }
  .code-model-img {
    padding: 0.2rem 20%;
    background: #fff;
    img {
      display: block;
      width: 100%;
      height: 180px;
    }
  }
  .code-model-bottom {
    padding: 0.2rem;
    font-size: 0.32rem;
    color: #888;
    line-height: 0.48rem;
    text-align: center;
    background: #fff;
    border-radius: 0 0 0.12rem 0.12rem;
  }
}
</style>
